<template>
  <div class="indexFour">
    <h2>
      <i class="iconfont icon-huo"></i> 嗨11抢先购
      <i class="iconfont icon-huo"></i>
      <!-- <span
            class="more"
             v-if="popular.length>3"
            @click="
              $router.push({
                path: '/giveAnEncore',
              })
            "
            >更多<van-icon name="arrow" /></span> -->
    </h2>
    <!-- <van-icon name="hot" color="red" style="transform: scale(1.5);"/> -->

    <van-skeleton title :row="5" v-if="popular.length == 0" />

    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      lazy-render
      :show-indicators="false"
      v-else
    >
      <van-swipe-item v-for="(value) in popular" :key="value.F_ProductId">
        <div
          class="popular"
          @click="
            $router.push({
              path: '/product',
              query: { id: value.F_ProductId, parents_id: username },
            })
          "
        >
          <div class="popular-img" :class="{sellOut:value.F_Number<=0}">
            <img :src="'http://higuang365.com/' + value.F_pic_url" />
          </div>
          <div class="popular-text">
            <div class="title">{{ value.F_Name }}</div>
            <div class="introduce">{{ value.F_yuliu4 }}</div>
            <div>
              <span class="price">￥{{ value.F_BdPrice }}</span>
              <span class="estimate">零售价：{{ value.F_Price }}</span>
              <div class="iconfont icon-fenxiang fenxiang">立即购买</div>
            </div>
          </div>
        </div>
      </van-swipe-item>
      <template #indicator="{ active }">
        <div class="custom-indicator">
          {{ active + 1 }}/{{ popular.length }}
        </div>
      </template>
    </van-swipe>
  </div>
</template>
<script lang="ts">
import { reactive, toRefs } from "@vue/reactivity";
import { GetTagGoodsList } from "@/api/home";
import { getCookie } from "@/lib/ecapi";
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    const data = reactive({
      popular: [],
      username: getCookie("S[MEMBER]"),
    });
    const onLoad = async () => {
      const res = await GetTagGoodsList({
        pageNum: 1,
        pageSize: 10,
        tag_id: "36",//39
        strlv: getCookie("MLV"),
      });
      if (!res[0]) {
        const res = await GetTagGoodsList({
          pageNum: 1,
          pageSize: 10,
          tag_id: "36",//39
          strlv: getCookie("MLV"),
        });
        data.popular = res[1];
        return;
      }
      data.popular = res[1];
    };
    onLoad();
    return { ...toRefs(data) };
  },
});
</script>
<style lang="scss" scoped>
.indexFour {
  h2 {
    font-size: 2rem;
    padding: 0.5rem;
    margin: 0;
    border-bottom: 2px solid #f7f7f7;
    position: relative;
    i{
      color: red;
    }
    .icon-huo {
      
      font-size: 2rem;
    }
    .more {
      font-size: 1rem;
      position: absolute;
      top: 1rem;
      right: 0;
      font-weight: 500;
      color: #f15e5e;
    }
  }
  .popular {
    display: flex;
    padding: 0 0.1rem;
  }
  .popular-img {
    flex: 1;
    position: relative;
    img {
      height: auto;
      border-radius: 1rem;
    }
    &.sellOut:after {
        content: "-- 已售罄 --";
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #000;
        border-radius: 1rem;
        opacity: 0.5;
        color: #fff;
        white-space: nowrap;
        font-size: 1.8rem;
        text-align: center;
        padding: calc(50% - 0.9rem) 0;
        border-radius: 1rem;
        box-sizing: border-box;
    }
  }
  .popular-text {
    flex: 1.4;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    padding: 1rem;
    background: url("")
      no-repeat;
    background-size: contain;
    background-position-x: right;
    .title {
      font-weight: 550;
      font-size: 1.4rem;
      overflow: hidden;
      width: 80%;
      margin: 0 auto;
      height: 2rem;
      line-height: 2rem;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
      display: -webkit-box;
    }
    .introduce {
      color: #777;
      width: 90%;
      height: 4.8rem;
      margin: auto;
      font-size: 1.1rem;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      line-height: 1.6rem;
      overflow: hidden;
    }
    .price {
      color: red;
      font-weight: 600;
      font-size: 1.6rem;
      margin-right: 1rem;
    }
    .estimate {
      font-size: 1rem;
      color: #c5c5c5;
      text-decoration: line-through;
    }
    .fenxiang {
      color: #0f8a40;
      padding-top: 0.5rem;
      font-size: 1.1rem;
    }
  }
}
.custom-indicator {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.2rem 0.5rem;
  font-size: 1.2rem;
}
</style>